<template>
  <div class="safety">
    <van-nav-bar
      title="安全中心"
      left-text="返回"
      left-arrow
      fixed
      @click-left="back"
    />
    <div class="safety-box">
      <div class="safety-item">
        <div class="item-box">
          <div class="item">
            <div class="item-title" @click="isShow">修改密码</div>
            <van-icon name="arrow" />
          </div>
          <div class="item">
            <div class="item-title" @click="exit">注销账号</div>
            <van-icon name="arrow" />
          </div>
          <div class="btn-box">
            <van-button
              color="linear-gradient(to right, #b6e1fe, #0c34ba)"
              size="large"
              round
              @click="toLogin"
              >退出登录</van-button
            >
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" closeable>
      <div class="password-box">
        <div class="txt">修改密码</div>
        <van-form>
          <!-- @submit="onSubmit" -->
          <van-field
            v-model="usernameOld.password"
            name="old"
            label="旧密码"
            placeholder="旧密码(首字母必须为字母)"
            autocomplete="off"
            :type="usernameOldStatus ? 'password' : 'text'"
            :right-icon="usernameOldStatus ? 'closed-eye' : 'eye-o'"
             @click-right-icon="togglePassword('usernameOldStatus')"
          />
          <van-field
            v-model="usernameNew.password"
            :type="usernameNewStatus ? 'password' : 'text'"
            :right-icon="usernameOldStatus ? 'closed-eye' : 'eye-o'"
            name="new"
            label="新密码"
            placeholder="新密码(首字母必须为字母)"
            autocomplete="off"
            @click-right-icon="togglePassword('usernameNewStatus')"
          />
          <div style="margin: 16px">
            <van-button
              round
              block
              type="info"
              native-type="submit"
              @click="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "safety",
  data() {
    return {
      username: "",
      password: "",
      show: false,
      // 旧密码
      usernameOld: {
        password: "",
      },
      // 新密码
      usernameNew: {
        password: "",
      },
      // 是否显示旧密码
      usernameOldStatus: true,
      // 是否显示新密码
      usernameNewStatus: true,
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    isShow() {
      this.show = true;
    },
    //退出登录
    toLogin() {
      //获取token
      let tokenString = sessionStorage.getItem("token");

      this.axios({
        method: "post",
        url: "/logout",
        data: {
          tokenString,
        },
      })
        .then((res) => {
          if (res.data.code === "F001") {
            //退出成功
            this.$toast(res.data.msg);
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 1000);
          }
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    },
    //修改密码
    submit() {
      if (
        this.usernameOld.password.length === 0 ||
        this.usernameNew.password.length === 0
      ) {
        this.$toast("请输入内容");
        return;
      }
      //验证密码格式
      let registerPasswrodReg = /^[A-Za-z][A-Za-z\d]{5,15}$/;
      if (!registerPasswrodReg.test(this.usernameNew.password)) {
        this.$toast("密码支持字母数字组合");
        return;
      }
      let old = this.usernameOld.password;
      let last = this.usernameNew.password;
      //获取token
      let tokenString = sessionStorage.getItem("token");

      this.axios({
        method: "post",
        url: "/updatePassword",
        data: {
          tokenString,
          password: last,
          oldPassword: old,
        },
      })
        .then((res) => {
          if (res.data.code === "E001") {
            //当前商品已经被用户收藏
            this.$toast(res.data.msg);
            setTimeout(() => {
              this.show = false;
            }, 1000);
          }
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    },
    //注销账号
    exit() {
      this.$dialog
        .confirm({
          title: "注销账号",
          message: "是否确定注销账号,一旦注销无法恢复!",
        })
        .then(() => {
          //获取token
          let tokenString = sessionStorage.getItem("token");
          this.axios({
            method: "POST",
            url: "/destroyAccount",
            data: {
              tokenString,
            },
          })
            .then((res) => {
              if (res.data.code === "G001") {
                //当前商品已经被用户收藏
                this.$toast(res.data.msg);
                setTimeout(() => {
                  this.$router.push({ name: "Login" });
                }, 1000);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((err) => {
          // 取消
          console.log("err ==>", err);
        });
    },
    //切换注册密码状态
    togglePassword(key) {
      this[key] = !this[key];
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar .van-icon {
  color: #0c34ba;
}
/deep/ .van-nav-bar__text {
  color: #0c34ba;
}
.safety-box {
  height: 160px;
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #0c34ba;
}
.safety-item {
  margin: 10px;
  padding: 10px;
  position: relative;
  top: 125px;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f8f9f9;
  padding: 10px 0;
  height: 25px;
  &:last-of-type {
    border-bottom: none;
  }
}
.item-title {
  font-size: 14px;
}
/deep/ .van-icon {
  margin-left: auto;
  color: #c0aca4;
}
.btn-box {
  margin-top: 120px;
}
.txt {
  margin-left: 10px;
  margin-top: 15px;
  font-size: 14px;
  color: #868b90;
  margin-bottom: 30px;
}
</style>